<!DOCTYPE html>
<html>
<head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
        div,span{
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float:left;
            font-size: 17px;
            font-family:Roman;
        }

        div.mini{
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family:Roman;
        }
    </style>
    <!--引入jquery的js库-->

</head>

<body>

<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>


<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >

<br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理

<br>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
<br>

<select name="job" id="job" multiple="multiple" size=4>
    <option>程序员</option>
    <option>中级程序员</option>
    <option>高级程序员</option>
    <option>系统分析师</option>
</select>

<select name="edu" id="edu">
    <option>本科</option>
    <option>博士</option>
    <option>硕士</option>
    <option>大专</option>
</select>


<div id="two" class="mini" >
    id为two   class是 mini  div
    <div  class="mini" >class是 mini</div>
</div>

<div class="one" >
    class是 one
    <div  class="mini" >class是 mini</div>
    <div  class="mini" >class是 mini</div>
</div>
<div class="one" >
    class是 one
    <div  class="mini01" >class是 mini01</div>
    <div  class="mini" >class是 mini</div>
</div>

</body>
<script type="text/javascript">
    $().ready(function () {
//                  <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
        $("#b1").click(function () {
            $("input:enabled").each(function (index,domEle) {
                alert($(this).val());
            });
        });
//                <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
        $("#b2").click(function () {
            $("input:disabled").each(function (index,domEle) {
                alert($(this).val());
            });
        });
//                <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
        $("#b3").click(function () {
            $("input:checked").each(function (index,doEle) {
                alert($(this).val());
            });
        });
//                <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
        $("#b4").click(function (index,doEle) {
            $("select option:selected").each(function (index,doEle) {
                alert($(this).text());
            });

        });
    });
</script>
</html>